<template>
  <uni-swiper-dot class="swiper-container" :info="swiperDataList" :current="current" mode="dot" field="content">
    <swiper class="swiper-main" @change="onChange">
      <swiper-item v-for="(item, index) in swiperDataList" :key="index">
        <image class="swiper-image" v-if="isDefaultImageVail" :src="item[props.type]" />
        <slot v-else :data="item"></slot>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
</template>
<script setup lang="ts">
import { ISwiperInterface } from '#/swiper/ISwiperInterface';
import { computed, PropType, ref } from 'vue';

defineOptions({ options: { styleIsolation: 'shared', virtualHost: true } });
const props = defineProps({
  swiperList: {
    type: Object as PropType<ISwiperInterface[]>, // 明确类型为 string
    required: true
  },
  type: {
    type: String as PropType<string>, // 明确类型为 string
    default: () => ''
  }
});
const current = ref(0);
const swiperDataList = computed(() => props.swiperList.filter(item => item.isShow != false));
const isDefaultImageVail = computed(() => props.type == 'image');
const onChange = (e: any) => {
  current.value = e.detail.current;
  emit('changeSwiper', current.value);
};
const emit = defineEmits(['changeSwiper']);
</script>

<style scoped lang="scss">
.swiper-image,
.swiper-main,
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-image ::v-deep view {
  background-size: cover !important;
}
</style>
